<template>
    <div class="create-order">
        <nav-bar class="nav-bar">
            <template v-slot:default>
                定单预览
            </template>
        </nav-bar>
        
        <div class="address-wrap" @click="goTo">
            <div class="name" @click="goTo">
                <span>{{address.name}}</span>
                <span>{{address.phone}}</span>
            </div>
            <div class="address">
                {{address.province}} {{address.city}} {{address.county}} {{address.address}}
            </div>
            <van-icon class="arrow" name="arrow" />
        </div>
        <div class="good">
            <div class="good-item" v-for="(item, index) in cartList" :key="index">
                <div class="good-img"><img v-lazy="item.goods.cover_url" alt=""></div>
                <div class="good-desc">
                    <div class="good-title">
                        <span>{{item.goods.title}}</span>
                        <span>x{{item.num}}</span>
                    </div>
                    <div class="good-btn">
                        <div class="price"><small>¥</small> {{item.goods.price+'.00'}}</div>
                    </div>
                </div>
            </div>
        </div>
        
        <van-submit-bar
            class="submit-all"
            :price="total * 100"
            button-text="生成订单"
            @submit="handleCreateOrder"
        >
            商品金额
        </van-submit-bar>
        
        <van-popup
            closeable
            :close-on-click-overlay="false"
            v-model:show="showPay"
            position="bottom"
            :style="{ height: '40%' }"
            @close="close"
        >
            
            <van-grid :border="false" :column-num="2">
                <van-grid-item>
                    支付宝二维码<br>
                    <van-image width="150" height="150" :src="aliyun" />
                </van-grid-item>
                <van-grid-item>
                    微信二维码<br>
                    <van-image width="150" height="150" :src="wechat" />
                </van-grid-item>
            
            </van-grid>
        
        </van-popup>
    </div>
</template>

<script>
import { reactive, onMounted, toRefs, computed } from 'vue'
import NavBar from "components/common/navbar/NavBar";
import { getOrderPreview,createOrder,payOrder,payOrderStatus } from 'network/order'
import { Toast } from 'vant'
import { useRoute, useRouter } from 'vue-router'
import {useStore} from 'vuex';
export default {
    components: {
        NavBar
    },
    setup() {
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const state = reactive({
            cartList: [],
            address: {},
            showPay:false,
            orderNo:'',
            aliyun:'',
            wechat:''
        })
        
        const init = ()=>{
            Toast.loading({message:'加载中...', forbidClick:true});
            
            getOrderPreview().then(res=>{
                let address = res.address.filter(n=>n.is_default == '1');
                
                if(address.length == 0) {
                    state.address = {
                        address:'还没有设置默认地址，请选择或填写地址信息'
                    }
                }else{
                    state.address = address[0];
                }
                
                state.cartList = res.carts;
                
                Toast.clear();
                
            })
        }
        
        onMounted(() => {
            init();
        })
        
        
        const goTo = () => {
            router.push({ path: '/address'})
        }
        
        
        
        const handleCreateOrder = () => {
            const params = {
                address_id: state.address.id
            }
            
            
            createOrder(params).then(res=>{
                Toast('创建定单成功');
                store.dispatch('updateCart');
                
                state.showPay = true;
                // 订单ID
                state.orderNo = res.id;
                
                payOrder(state.orderNo, {type:'aliyun'}).then(res=>{
                    state.aliyun = res.qr_code_url;
                    state.wechat = res.qr_code_url;
                })
                
                /* payOrder(state.orderNo, {type:'wechat'}).then(res=>{
                     console.log(res);
                     state.wechat = res.qr_code_url;
                 })*/
                
                // 轮询查看
                const timer = setInterval(()=>{
                    payOrderStatus(state.orderNo).then(res=>{
                        if(res=='2') {
                            clearInterval(timer);
                            router.push({path:'/orderdetail', query:{id:state.orderNo}})
                        }
                    })
                }, 2000)
            })
            
        }
        
        const close = () => {
            router.push({path:'/orderdetail', query:{id:state.orderNo}})
        }
        
        const total = computed(()=>{
            let sum = 0;
            state.cartList.forEach(item=>{
                sum += parseInt(item.num) * parseFloat(item.goods.price);
            })
            return sum;
        })
        
        return {
            ...toRefs(state),
            goTo,
            handleCreateOrder,
            close,
            total
        }
    }
}
</script>

<style lang="scss" scoped>
.create-order {
    background: #f9f9f9;
    .address-wrap {
        text-align: left;
        margin-bottom: 20px;
        background: #fff;
        position: relative;
        margin-top: 44px;
        font-size: 14px;
        padding: 15px;
        color: #222333;
        .name, .address {
            margin: 10px 0;
        }
        .arrow {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 20px;
        }
        &::before {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            height: 2px;
            background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
            background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
            background-size: 80px;
            content: '';
        }
    }
    .good {
        margin-bottom: 120px;
    }
    .good-item {
        padding: 10px;
        background: #fff;
        display: flex;
        .good-img {
            img {
                width:100px;
                height:auto;
            }
        }
        .good-desc {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1;
            padding: 20px;
            .good-title {
                display: flex;
                justify-content: space-between;
            }
            .good-btn {
                display: flex;
                justify-content: space-between;
                .price {
                    font-size: 16px;
                    color: red;
                    line-height: 28px;
                }
                .van-icon-delete {
                    font-size: 20px;
                    margin-top: 4px;
                }
            }
        }
    }
    .pay-wrap {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #fff;
        padding: 10px 0;
        padding-bottom: 50px;
        border-top: 1px solid #e9e9e9;
        >div {
            display: flex;
            justify-content: space-between;
            padding: 0 5%;
            margin: 10px 0;
            font-size: 14px;
            span:nth-child(2) {
                color: red;
                font-size: 18px;
            }
        }
        .pay-btn {
            position: fixed;
            bottom: 7px;
            right: 0;
            left: 0;
            width: 90%;
            margin: 0 auto;
        }
    }
}
.submit-all {
    margin-bottom: 50px;
    z-index: 9 !important;
}
</style>
